<!-- 基础页面外壳 -->

<!-- 属性 -->
<!-- 配置名称 | 类型 | 用途 | 返回值 | 默认值 | 必填 | 说明 -->
<!-- outitle | Boolean | 是否显示主体卡片外部标题      | - | false | - | - -->
<!-- intitle | Boolean | 是否显示主体卡片内部标题      | - | false | - | - -->
<!-- upshow  | Boolean | 是否显示上方模块（如tab标签） | - | false | - | - -->
<!-- apart   | Boolean | 上方某块是否与主体卡片分离    | - | false | - | - -->

<!-- 事件 -->
<!-- 无 -->

<!-- 插槽 -->
<!--
  #outitle: 主体卡片外部标题
  #intitle: 主体卡片内部标题
  #upshow: 主体卡片上方内容
  #toolbar: 页面全局操作
  #searchbar: 页面筛选内容
  #default: 页面内容
-->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

interface Props {
  outitle?: boolean
  intitle?: boolean
  upshow?: boolean
  apart?: boolean
  noNeck?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  outitle: false,
  intitle: false,
  upshow: false,
  apart: false,
  noNeck: false
})
const route = useRoute()

const showTitle = ref<any>('')

watch(
  () => route,
  (newVal) => {
    showTitle.value = newVal.meta.title
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div class="base-page-wrapper">
    <div v-if="props.outitle" class="base-page-out-title">
      <slot name="outitle">
        {{ showTitle }}
      </slot>
    </div>
    <div
      v-if="props.upshow"
      :class="{
        'base-page-up': true,
        'base-page-up-apart': props.upshow && props.apart
      }"
    >
      <slot name="upshow"></slot>
    </div>
    <div v-if="props.upshow && !props.apart" class="base-page-apart-line"></div>
    <div
      :class="{
        'base-page-down': true,
        'base-page-down-not-apart': props.upshow && !props.apart
      }"
    >
      <div v-if="props.intitle" class="base-page-header">
        <div class="base-page-title">
          <div class="base-page-title-icon"></div>
          <div class="base-page-title-content">
            <slot name="intitle">
              {{ showTitle }}
            </slot>
          </div>
        </div>
        <div class="base-page-title-bar">
          <slot name="intitlebar"></slot>
        </div>
      </div>
      <div v-if="!props.noNeck" class="base-page-neck">
        <div class="base-page-searchbar">
          <slot name="searchbar"></slot>
        </div>
        <div class="base-page-toolbar">
          <slot name="toolbar"></slot>
        </div>
      </div>
      <div v-if="props.noNeck" style="height: 20px"></div>
      <div class="base-page-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.base-page-wrapper {
  @include rect(100%, 100%);
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  .base-page-out-title {
    @include rect(100%, auto);
    font-family: 'PingFangSC-Bold';
    font-size: 20px;
    font-weight: bold;
    color: #1f2128;
    padding-bottom: 20px;
  }
  .base-page-up {
    @include rect(100%, auto);
    box-sizing: border-box;
    background-color: var(--white-color);
    border-radius: 10px 10px 0 0;
    &.base-page-up-apart {
      margin-bottom: 20px;
      border-radius: 10px;
    }
  }
  .base-page-apart-line {
    @include rect(100%, auto);
    border: 1px solid #f5f7f9;
  }
  .base-page-down {
    @include rect(100%, 100%);
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    box-sizing: border-box;
    background-color: var(--white-color);
    overflow: auto;
    border-radius: 10px;
    &.base-page-down-not-apart {
      border-radius: 0 0 10px 10px;
    }
    .base-page-header {
      @include rect(100%, auto);
      @include flex(row, space-between, center);
      padding-top: 20px;
      .base-page-title {
        @include flex(row, flex-start, center);
        .base-page-title-icon {
          @include rect(3px, 16px);
          background-color: var(--theme-color);
        }
        .base-page-title-content {
          font-family: 'PingFangSC-Bold';
          font-size: 16px;
          font-weight: bold;
          color: var(--black-color);
          line-height: 21px;
          margin-left: 8px;
        }
      }
    }
    .base-page-neck {
      @include rect(100%, auto);
      @include flex(row, space-between, flex-start);
      padding-top: 20px;
      .base-page-toolbar {
        @include flex(row, flex-end, flex-start);
        flex-wrap: nowrap;
        padding-bottom: 20px;
      }
    }
    .base-page-body {
      @include rect(100%, auto);
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
